<template>
    <div>
        <player ref="player" :height="isHeight" :playerinfo="playinfo" style="width: 100%;"></player>
    </div>
</template>
<script>
import player from '@/views/components/player/newPlayer.vue';
import { startPlay, closeStream, listChannel } from '@/api/iot/channel';
import { startPlayRecord } from '@/api/iot/record';

export default {
    name: 'device-live-stream',
    components: {
        player,
    },
    props: {
        device: {
            type: Object,
            default: null,
        },
        height: {
            type: String,
            default: '300px',
        }
    },
    watch: {
        // 获取到父组件传递的device后
        device: function (newVal, oldVal) {

            this.deviceInfo = newVal;
            if (this.deviceInfo.channelId) {
                this.channelId = this.deviceInfo.channelId;
                this.changeChannel();
            }
            if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
                this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
                this.deviceId = this.device.serialNumber;
            }

        },
        height: function (newVal, oldVal) {
            this.isHeight = newVal;
            console.error(this.isHeight, 'this.widthData ');
        }
    },
    data() {
        return {
            deviceInfo: {},
            deviceId: '',
            channelId: '',
            streamId: '',
            ssrc: '',
            playurl: '',
            playinfo: {},
            playrecord: false,
            playrecording: false,
            playing: false,
            channelList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceSipId: null,
                channelSipId: null,
            },
            isHeight: '300px',
        };
    },
    created() {

        this.queryParams.deviceSipId = this.device.serialNumber;
        this.channelId = this.device.channelId;
        this.deviceId = this.device.serialNumber;
        this.getList();
        this.playinfo = {
            playtype: 'play',
            deviceId: this.device.serialNumber,
        };
        setTimeout(() => {
            this.sendDevicePush();
        }, 500)
    },
    beforeDestroy() { },
    destroyed() {
        this.closeStream();
    },
    methods: {
        /** 查询监控设备通道信息列表 */
        getList() {
            this.loading = true;
            listChannel(this.queryParams).then((response) => {
                this.channelList = response.rows.map((item) => {
                    return { value: item.channelSipId, label: item.channelName };
                });

            });
        },
        changeChannel() {
            this.playinfo.channelId = this.channelId;

            this.sendDevicePush();
        },
        // 直播播放
        sendDevicePush() {

            if (!this.channelId) {

                return;
            }
            startPlay(this.deviceId, this.channelId).then((response) => {

                const res = response.data;
                this.streamId = res.streamId;
                this.playurl = res.playurl;
                if (!this.$refs.player.isInit) {
                    this.$refs.player.init();
                }
                this.$refs.player.play(res.playurl);
                this.playing = true;
            });
        },
        // 开启直播录像功能
        startPlayRecord() {
            this.deviceId = this.queryParams.deviceSipId;
            if (!this.channelId) {

                return;
            }
            if (this.playrecord) {
                this.closeStream();
                startPlayRecord(this.deviceId, this.channelId).then((response) => {
                    this.playrecording = true;
                    const res = response.data;
                    this.streamId = res.streamId;
                    this.playurl = res.playurl;
                    if (!this.$refs.player.isInit) {
                        this.$refs.player.init();
                    }
                    this.$refs.player.play(res.playurl);
                    this.playing = true;
                });
            } else {
                this.playrecording = false;
                this.closeStream();
                this.sendDevicePush();
            }
        },
        closeStream() {
            if (this.playrecording === true) {
                return;
            }
            if (this.playing && this.streamId) {
                closeStream(this.deviceId, this.streamId).then((res) => {
                    this.streamId = '';
                    this.ssrc = '';
                    this.playurl = '';
                });
                this.playing = false;
                // this.$refs.player.destroy();
            }
        },
        destroy() {
            if (this.playing && this.streamId) {
                this.$refs.player.destroy();
            }
        },
    },
};
</script>